<ng-template #progressInfoTemplate>
  <span class="ant-progress-text"
        *ngIf="nzShowInfo">
    <ng-container *ngIf="status === 'exception' || (status === 'success' && !nzFormat); else formatTemplate">
      <i nz-icon
         [nzType]="icon"></i>
    </ng-container>
    <ng-template #formatTemplate>
      {{ formatter(nzPercent) }}
    </ng-template>
  </span>
</ng-template>

<div [ngClass]="'ant-progress ant-progress-status-' + status"
     [class.ant-progress-line]="nzType == 'line'"
     [class.ant-progress-small]="nzSize == 'small'"
     [class.ant-progress-show-info]="nzShowInfo"
     [class.ant-progress-circle]="isCircleStyle">
  <!-- line progress -->
  <div *ngIf="nzType === 'line'">
    <div class="ant-progress-outer">
      <div class="ant-progress-inner">
        <div class="ant-progress-bg"
             [style.width.%]="nzPercent"
             [style.border-radius]="nzStrokeLinecap === 'round' ? '100px' : '0'"
             [style.background]="!isGradient ? nzStrokeColor : null"
             [style.background-image]="isGradient ? lineGradient : null"
             [style.height.px]="strokeWidth"></div>
        <div *ngIf="nzSuccessPercent || nzSuccessPercent === 0"
             class="ant-progress-success-bg"
             [style.width.%]="nzSuccessPercent"
             [style.border-radius]="nzStrokeLinecap === 'round' ? '100px' : '0'"
             [style.height.px]="strokeWidth"></div>
      </div>
    </div>
    <ng-template [ngTemplateOutlet]="progressInfoTemplate"></ng-template>
  </div>

  <!-- circle / dashboard progress -->
  <div [style.width.px]="this.nzWidth"
       [style.height.px]="this.nzWidth"
       [style.fontSize.px]="this.nzWidth * 0.15 + 6"
       class="ant-progress-inner"
       [class.ant-progress-circle-gradient]="isGradient"
       *ngIf="isCircleStyle">
    <svg class="ant-progress-circle "
         viewBox="0 0 100 100">
      <defs *ngIf="isGradient">
        <linearGradient [id]="'gradient-' + gradientId"
                        x1="100%"
                        y1="0%"
                        x2="0%"
                        y2="0%">
          <stop *ngFor="let i of circleGradient;"
                [attr.offset]="i.offset"
                [attr.stop-color]="i.color"></stop>
        </linearGradient>
      </defs>
      <path class="ant-progress-circle-trail"
            stroke="#f3f3f3"
            fill-opacity="0"
            [attr.stroke-width]="strokeWidth"
            [attr.d]="pathString"
            [ngStyle]="trailPathStyle"></path>
      <path *ngFor="let p of progressCirclePath; trackBy: trackByFn"
            class="ant-progress-circle-path"
            fill-opacity="0"
            [attr.d]="pathString"
            [attr.stroke-linecap]="nzStrokeLinecap"
            [attr.stroke]="p.stroke"
            [attr.stroke-width]="nzPercent ? strokeWidth : 0"
            [ngStyle]="p.strokePathStyle">
      </path>
    </svg>
    <ng-template [ngTemplateOutlet]="progressInfoTemplate"></ng-template>
  </div>
</div>
